<template>
  <div class="rightMain">


    <div class="title" v-if="nextItemClick1">{{ title }}</div>
    <div class="ss6" v-if="nextItemClick1">

      <div class="ss5">{{$t('text.System.l26') }}</div>
      <div class="ss12">
        <div class="ss11" @click="next(1, item.id,item)" v-for="item in jobList" v-bind:key="item">
          <div class="ss8">{{ item.name }}</div>
          <div class="ss10">>
          </div>
        </div>
      </div>

      <div class="ss12">
        <DialogLayout24 :jobLevel="jobLevel" @returnData="addJobSuccess">
          <div class="d1">
            <img class="d3" src="../../assets/images/add2.svg">
            <div class="d2" style="color: #6698ff;">{{ $t('text.System.l14') }}</div>
          </div>
        </DialogLayout24>
      </div>
    </div>


    <div class="title2" v-if="nextItemClick2">
      <div @click="back(1)" class="backDiv">
        <img class="backImg" src="../../assets/images/back.svg">
        <div style="padding-top: 2px;">{{ $t('text.System.l25') }}</div>
      </div>
      <div style="flex: 1;">{{ submitJobData.name }}</div>
      <div style="flex: 1;"></div>
    </div>
    <div class="ss6" v-if="nextItemClick2">

      <div class="ss5">{{ $t('text.System.l27') }}</div>
      <div class="ss12">
        <div class="ss11">
          <div class="ss8">{{ $t('text.System.l29') }}</div>
          <div class="ss10">
            <!--            <input value="管理员">-->
            <input v-model="submitJobData.name" @blur="changeInput">
          </div>
        </div>
        <div class="ss11">
          <div class="ss8">{{ $t('text.System.l30') }}</div>
          <div class="ss10">
            <CommonSelectKey :dataList="jobLevel" :myStyles="selectStyle" @returnData="setData" isOmit
                             insertKey="level" :default="selectStr" :is-select="true"></CommonSelectKey>
          </div>
        </div>
      </div>

      <div class="ss5">{{ $t('text.System.l28') }}</div>
      <div class="ss12">
        <div class="ss11" @click="next(2, 1)">
          <div class="ss8">{{ $t('text.System.l31') }}</div>
          <div class="ss10">>
          </div>
        </div>
        <div class="ss11" @click="next(2, 2)">
          <div class="ss8">{{ $t('text.System.l32') }}</div>
          <div class="ss10">>
          </div>
        </div>
        <div class="ss11" @click="next(2, 3)">
          <div class="ss8">{{ $t('text.System.l33') }}</div>
          <div class="ss10">>
          </div>
        </div>
        <div class="ss11" @click="next(2, 4)">
          <div class="ss8">{{ $t('text.System.l34') }}</div>
          <div class="ss10">>
          </div>
        </div>
        <div class="ss11" @click="next(2, 5)">
          <div class="ss8">{{ $t('text.System.l35') }}</div>
          <div class="ss10">>
          </div>
        </div>
        <div class="ss11" @click="next(2, 6)">
          <div class="ss8">{{ $t('text.System.l36') }}</div>
          <div class="ss10">>
          </div>
        </div>
        <div class="ss11" @click="next(2, 7)">
          <div class="ss8">{{ $t('text.System.a39') }}</div>
          <div class="ss10">>
          </div>
        </div>
        <div class="ss11" style="border: none;" @click="next(2, 8)">
          <div class="ss8">{{ $t('text.System.a40') }}</div>
          <div class="ss10">>
          </div>
        </div>
      </div>

      <div class="ss12">
        <DialogLayout25 @returnData="addJobSuccess" :jobId="jobId">
          <div class="d1">
            <img class="d3" src="../../assets/images/de.svg">
            <div class="d2">{{ $t('text.System.l13') }}</div>
          </div>
        </DialogLayout25>
      </div>
    </div>

    <PostNextItem1 v-if="nextItemClick3 && nextIndex == '1'" @returnData="childBack" :job-id="jobId"></PostNextItem1>
    <PostNextItem2 v-if="nextItemClick3 && nextIndex == '2'" @returnData="childBack" :job-id="jobId"></PostNextItem2>
    <PostNextItem3 v-if="nextItemClick3 && nextIndex == '3'" @returnData="childBack" :job-id="jobId"></PostNextItem3>
    <PostNextItem4 v-if="nextItemClick3 && nextIndex == '4'" @returnData="childBack" :job-id="jobId"></PostNextItem4>
    <PostNextItem5 v-if="nextItemClick3 && nextIndex == '5'" @returnData="childBack" :job-id="jobId"></PostNextItem5>
    <PostNextItem6 v-if="nextItemClick3 && nextIndex == '6'" @returnData="childBack" :job-id="jobId"></PostNextItem6>
    <PostNextItem7 v-if="nextItemClick3 && nextIndex == '7'" @returnData="childBack" :job-id="jobId"></PostNextItem7>
    <PostNextItem8 v-if="nextItemClick3 && nextIndex == '8'" @returnData="childBack" :job-id="jobId"></PostNextItem8>
  </div>
</template>

<script>

import DialogLayout24 from "../../components/dialogLayout/DialogLayout24.vue";
import DialogLayout25 from "../../components/dialogLayout/DialogLayout25.vue";
import CommonSelectKey from "../../components/input/CommonSelectKey.vue";
import {ElMessage} from 'element-plus'
import {jobList, findListByTypeCode, updateJobLevel} from '../../http/api'
import PostNextItem1 from './PostNextItem1.vue'
import PostNextItem2 from './PostNextItem2.vue'
import PostNextItem3 from './PostNextItem3.vue'
import PostNextItem4 from './PostNextItem4.vue'
import PostNextItem5 from './PostNextItem5.vue'
import PostNextItem6 from './PostNextItem6.vue'
import {translate as $t} from "@/language";
import PostNextItem7 from "./PostNextItem7.vue";
import PostNextItem8 from "./PostNextItem8.vue";
// import index from "vuex";

export default {
  name: "SourceTourists",
  components: {
    PostNextItem1,
    PostNextItem2,
    PostNextItem3,
    PostNextItem4,
    PostNextItem5,
    PostNextItem6,
    DialogLayout24,
    DialogLayout25,
    CommonSelectKey,
    PostNextItem7,
    PostNextItem8
},
  props: {
    title: String
  },
  data() {
    return {
      selectStyle: {border: 'none', justifyContent: 'flex-end', width: '120px'},
      switchStyle: {height: '15px'},
      jobList: [],
      jobLevel: [],
      jobId: '',
      value1: true,
      loading1: false,
      nextItemClick1: true,
      nextItemClick2: false,
      nextItemClick3: false,
      nextItemClick4: false,
      nextIndex: 1,
      selectStr: '',
      jobName: '',
      JobData: {},
      submitJobData: {
        id: '',
        name: '',
        level: 999
      }
    }
  },
  created() {
    this.getJob();
    findListByTypeCode('jobLevel').then(res => {
      if (res !== undefined) {
        this.jobLevel = res
      }
    }).catch()
  },
  mounted() {

  },
  methods: {
    $t,
    setData(data) {
      this.submitJobData.level = data.level;
      this.updateJob();
    },
    //input失去焦点
    changeInput(){
      this.updateJob();
    },
    beforeChange1() {
      this.loading1 = true
      return new Promise((resolve) => {
        setTimeout(() => {
          this.loading1 = false
          ElMessage.success('Switch success')
          return resolve(true)
        }, 500)
      })
    },
    addJobSuccess() {
      this.getJob()
    },
    getJob() {

      if (!this.nextItemClick1) {
        this.nextItemClick1 = !this.nextItemClick1;
        this.nextItemClick2 = !this.nextItemClick2;
      }
      jobList().then(res => {
        if (res !== undefined) {
          this.jobList = res
          // console.log("岗位设置，res:", res)
        }
      }).catch()
    },
    next(inedx, id, item) {
      switch (inedx) {
        case 1:
          this.nextItemClick1 = !this.nextItemClick1;
          this.nextItemClick2 = !this.nextItemClick2;
          this.jobId = id;
          // console.log('item',item);
          this.JobData = item;
          this.submitJobData.id = item.id;
          this.submitJobData.name = item.name;
          this.submitJobData.level = item.level;
          this.getSelectStr(item)
          // console.log('this.JobData',this.JobData);

          break;
        case 2:
          this.nextItemClick2 = !this.nextItemClick2;
          this.nextItemClick3 = !this.nextItemClick3;
          this.nextIndex = id;
          // this.getSelectItem(item);
          // this.jobName = item.name
          break;
      }
      // console.log('next>>item', item)
      // console.log('next>>this.jobLevel', this.jobLevel)
      // console.log(this.nextIndex)
      // console.log('next>>this.jobId', this.jobId)

    },
    back(inedx) {
      switch (inedx) {
        case 1:
          this.nextItemClick1 = !this.nextItemClick1;
          this.nextItemClick2 = !this.nextItemClick2;
          break;
      }
    },
    childBack() {
      this.nextItemClick2 = !this.nextItemClick2;
      this.nextItemClick3 = !this.nextItemClick3;
    },
    getSelectStr(item) {
      for (let job of this.jobLevel) {
        if (item.level === job.dictValue) {
          this.selectStr = job.dictName;
          break;
        }
        // console.log('job',job.dictValue)
        // console.log('job',job.dictName)
      }
    },
    //修改岗位跟岗位级别的提交
    updateJob() {
      // console.log('this.submitJobData',this.submitJobData)

      updateJobLevel(this.submitJobData).then(res => {
        ElMessage.success(this.$t('text.System.l37'))
        if (res !== undefined) {
          // console.log("res", res)
        }
      })
    },
    deletes() {

    }

  },
  watch: {},
  computed: {}

}
</script>
<style scoped>
.backDiv {
  display: flex;
  flex: 1 1 0%;
  color: #6698ff;
  font-size: 13px;
  align-items: center;
  padding-left: 20px;
}

.backImg {
  width: 23px;
  height: 23px;
  padding-right: 5px;
}

.ss12 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss11 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
}

input {
  border: none;
  outline: none;
  text-align: end;
}

textarea {
  width: 100%;
  border: none;
  outline: none;
}


.title {
  background: #f2f2f2;
  color: gray;
  height: 40px;
  line-height: 40px;
}

.title2 {
  background: #f2f2f2;
  color: gray;
  height: 40px;
  line-height: 40px;
  display: flex;
}

.rightMain {
  width: 100%;
  margin: 10px 15px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.ss7 {
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss6 {
  display: flex;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  flex-direction: column;
  min-width: 300px;
  padding: 30px 100px;
  overflow: auto;
  height: 100%;
}

.ss5 {
  text-align: left;
  color: #444;
  padding: 7px 0px;
  font-size: 13px;
}

.d1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.d2 {
  color: #ff4b4b;
}

.d3 {
  width: 20px;
  height: 20px;
  padding-right: 3px;
}
</style>
  